<template>
	<div v-loading="loading">
		<div class="content-top">
			<span class="h1">项目管理</span>
			<span class="h2">创建项目</span>
		</div>
		<div class="contens" style="margin-top: 20px;">
			<div class="left-content " style="margin-bottom: 20px;">
				<div class="clearfix">
					<p class="fl titles">创建项目</p>
					<el-button type="primary" size="small" @click="addZslb()" style='margin-top: 5px; margin-left: 10px;'>添加工程项目</el-button>
					<div class="fr" >
						<el-input v-model="search" placeholder="请输入项目名" style="width:217px;"></el-input>
						<el-button type="primary" @click='searchs()'>查询</el-button>
					</div>
				</div>
			</div>
			<el-table :data="prosData" border style="width: 100%">
				<el-table-column
                type="index"
                width="50">
              </el-table-column>
				<el-table-column prop="Name" label="名称">
				</el-table-column>
				<el-table-column prop="KMS" label="KM或亩">
				</el-table-column>
				<el-table-column prop="StateStr" label="状态">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="small" type="success" @click='modiy(scope.row.ID,scope.row.Name,scope.row.KMS)'>修改</el-button>
						<el-button size="small" type="danger" @click='del(scope.row.ID)'>删除</el-button>
						<el-button v-if="scope.row.State==2" size="small" type="warning" @click="pross(scope.row.ID)">开启</el-button>
						<el-button v-if="scope.row.State==1" size="small" type="warning" @click="pross(scope.row.ID)">关闭</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination small :current-page="pages" @current-change="handleCurrentChange" layout="prev, pager, next" :total="total" background>
				</el-pagination>
			</div>
		</div>
		<!--新建项目-->
		<el-dialog title="工程项目" :visible.sync="Pro" width="400px" >
			<div>
				<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
				  <el-form-item label="名称:">
				    <el-input v-model="formLabelAlign.name"></el-input>
				  </el-form-item>
				  <el-form-item label="里程或亩:">
				    <el-input v-model="formLabelAlign.limi"></el-input>
				  </el-form-item>
				  <el-form-item label="状态:">
				    <el-radio-group v-model="statu">
						<el-radio :label="1">未审核</el-radio>
						<el-radio :label="2">正常</el-radio>
						<el-radio :label="3">关闭</el-radio>
					</el-radio-group>
				  </el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
			    <el-button @click="Pro = false">取 消</el-button>
			    <el-button type="primary" @click="addPro()">确 定</el-button>
		    </span>
		</el-dialog>
		<!--//修改项目-->
		<el-dialog title="工程项目" :visible.sync="Pro1" width="400px">
			<div>
				<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
				  <el-form-item label="名称:">
				    <el-input v-model="formLabelAlign.name"></el-input>
				  </el-form-item>
				  <el-form-item label="里程或亩:">
				    <el-input v-model="formLabelAlign.limi"></el-input>
				  </el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
			    <el-button @click="Pro = false">取 消</el-button>
			    <el-button type="primary" @click="edit()">确 定</el-button>
		    </span>
		</el-dialog>
	</div>
</template>
<script></script>
<script>
	import api from '../../axios/api'
	export default {
		name: 'workItem',
		data() {
			return {
				loading:false,
				statu:1,//状态
				pages:1,//页码
				total:1,//页码总条数
				Pro1:false,//修改弹框
				formLabelAlign:{
					name:'',
					limi:'',
					state:''
				},
				labelPosition:'left',
				Pro:false,//添加弹框
				search:"",//搜索
				prosData: [], //工程项目
				id:'',//公共id
			}
		},
		created(){
			this.prolist()
		},
		methods: {
			//分页
			handleCurrentChange(val){
				this.loading = true
				this.pages = val
				this.$post(api.prolist, {
				  "Para": {
				    "QueryKeyWord": this.search
				  },
				  "PageSize": 10,
				  "PageIndex": this.pages-1,
				  "OrderString": "",
				  "ToExcel": false
				})
				.then((response) => {
					console.log(response)
					if(response.isOK == true && response.state == 200) {
						this.loading = false
						this.prosData = response.Data.Data
						this.total = response.Data.Items ? response.Data.Items : 1
					}else{
						this.loading = false
						this.$message.error(response.msg );
					}
				}).catch((err)=>{
					this.loading = false
				})
			},
			//获取项目列表
			prolist(){
				this.loading = true
				this.$post(api.prolist, {
				  "Para": {
				    "QueryKeyWord": ""
				  },
				  "PageSize": 10,
				  "PageIndex": this.pages-1,
				  "OrderString": "",
				  "ToExcel": false
				})
				.then((response) => {
					console.log(response)
					if(response.isOK == true && response.state == 200) {
						this.loading = false
						this.prosData = response.Data.Data
						this.total = response.Data.Items ? response.Data.Items : 1
					}else{
						this.loading = false
						this.$message.error(response.msg );
					}
				}).catch((err)=>{
					this.loading = false
				})
			},
			//添加弹框
			addZslb(){
				this.formLabelAlign.name = ''
				this.formLabelAlign.limi = ''
				this.statu = 1
				this.Pro=true
			},
			//确定添加项目
			addPro(){
				if(this.formLabelAlign.name ==''||this.formLabelAlign.limi ==''){
					this.$message({
						message: '参数不能为空',
						type: 'warning'
					});
					return
				}
				this.Pro=false
				this.loading = true
				this.$post(api.proadd, {
				  "Name": this.formLabelAlign.name,
				  "KMS": this.formLabelAlign.limi,
				  "State": this.statu
				})
				.then((response) => {
					console.log(response)
					if(response.isOK == true && response.state == 200) {
						this.loading = true
						this.$message({
							message: '添加成功',
							type: 'success'
						});
						this.pages = 1
						this.prolist()
					}else{
						this.loading = false
						this.$message.error(response.msg );
					}
				}).catch((err)=>{
					this.loading = false
				})
			},
			//修改弹框
			modiy(id,name,km){
				this.id = id
				this.formLabelAlign.name = name
				this.formLabelAlign.limi = km
				this.Pro1= true
			},
			edit(){
				if(this.formLabelAlign.name ==''||this.formLabelAlign.limi ==''){
					this.$message({
						message: '参数不能为空',
						type: 'warning'
					});
					return
				}
				this.loading = true
				this.Pro1= false
				this.$post(api.proupdate, {
				  "ID": this.id,
				  "Name": this.formLabelAlign.name,
				  "KMS": this.formLabelAlign.limi
				})
				.then((response) => {
					console.log(response)
					if(response.isOK == true && response.state == 200) {
						this.$message({
							message: '修改成功',
							type: 'success'
						});
						this.pages = 1
						this.prolist()
					}else{
						this.loading = false
						this.$message.error(response.msg );
					}
				}).catch((err)=>{
					this.loading = false
				})
			},
			//搜索
			searchs(){
				this.loading = true
				this.pages = 1
				this.$post(api.prolist, {
				  "Para": {
				    "QueryKeyWord": this.search
				  },
				  "PageSize": 10,
				  "PageIndex": this.pages-1,
				  "OrderString": "",
				  "ToExcel": false
				})
				.then((response) => {
					console.log(response)
					if(response.isOK == true && response.state == 200) {
						this.loading = false
						this.prosData = response.Data.Data
						this.total = response.Data.Items ? response.Data.Items : 1
					}else{
						this.loading = false
						this.$message.error(response.msg );
					}
				}).catch((err)=>{
					this.loading = false
				})
			},
			//删除
			del(id){
				this.$confirm('将永久删除该项目, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.loading = true
					this.$get(api.prodel + '/' + id)
						.then((response) => {
							if(response.data.isOK == true && response.data.state == 200) {
								this.loading = false
								this.pages = 1
								this.prolist()
								this.$message({
									message: '删除成功',
									type: 'success'
								});
							}else{
									this.loading = false
									this.$message.error(response.data.msg );
								}
							}).catch((err)=>{
								this.loading = false
							})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//关闭
			pross(id){
				this.$get(api.pross + "/" + id).then(response => {
							if (response.data.isOK == true && response.data.state == 200) {
								this.loading=false;
								this.prolist();
							} else {
								this.loading=false;
								this.$message.error(response.data.msg);
							}
						}).catch((error)=>{
							this.loading=false;
						})
			},
		}
	}
</script>

<style>

</style>